<template>
	<div id="air">
		<div class="air-box">
			<!-- 空调主体 -->
			<image src="@/static/air/1.png" mode="widthFix" class="air-container"></image>
			<!-- 空调参数 -->
			<image src="@/static/air/00.png" mode="widthFix" class="air-parameter"></image>
			<!-- 空调温度 -->
			<div class="air-right-box">
				<image src="@/static/air/b01.png" mode="widthFix" class="air-model" v-show="airModel==0"></image>
				<image src="@/static/air/b20.png" mode="widthFix" class="air-model" v-show="airModel==1"></image>
				<image :src="'../../static/air/'+airTemperature+'.png'" mode="widthFix" class="air-temperature"></image>
			</div>
		</div>
		<div class="air-wind" :style="{'opacity':airStart?1:0}">
			<image src="@/static/air/v.png" mode="widthFix"></image>
		</div>
		
		<div class="air-button">
			<div v-show="airStart">
				<image src="@/static/air/a.png" mode="widthFix" class="cool" @click="airModel=0"></image>
			</div> 
			<div>
				<image src="@/static/air/b.png" mode="widthFix" class="switch" @click="airStatus()"></image>
				<div class="box" v-if="airStart">
					<image src="@/static/air/b3.png" mode="widthFix" class="up" @click="up()"></image>
				</div>
				<div class="box" v-if="airStart">
					<image src="@/static/air/b4.png" mode="widthFix" class="down"  @click="down()"></image>
				</div>
			</div>
			<div v-show="airStart">
				<image src="@/static/air/c.png" mode="widthFix" class="hot"  @click="airModel=1"></image>
			</div>
		</div>
		<audio src="@/static/audio/di.mp3" style="opacity: 0;"></audio>
		<audio src="@/static/audio/ac-work.mp3" style="opacity: 0;"></audio>
		<audio src="@/static/audio/air-extractor-fan.mp3" style="opacity: 0;"></audio>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				airModel:-1,
				airTemperature:16,
				airStart:false,
			};
		},
		methods:{
			airStatus(){
				this.airStart=!this.airStart
				if(this.airStart){
					this.airModel = 0
				}else{
					this.airModel = -1
				}
			},
			up(){
				if(this.airTemperature<31){
					this.airTemperature++
				}
			},
			down(){
				if(this.airTemperature>16){
					this.airTemperature--
				}
			}
		}
	}
</script>

<style lang="less">
	@keyframes myfirst
	{
	    0% {opacity: 1;}
	    50% {opacity: 0;}
		100% {opacity: 1;}
	}
	#air{
		padding: 40rpx 0;
		.air-box{
			margin:0 auto;
			width: 90%;
			position: relative;
			.air-container{
				display: block;
				margin: 0 auto;
				width: 100%;
			}
			.air-parameter{
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				width: 80rpx;
			}
			.air-right-box{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 40rpx;
				display: flex;
				align-items: center;
				.air-temperature{
					width: 120rpx;
				}
				.air-model{
					width: 40rpx;
					// margin-right: 10rpx;
					// display: block;
				}
			}
		}
		.air-wind{
			text-align: center;
			margin-bottom: 40rpx;
			image{
				width: 80%;
				animation: myfirst 1s infinite;
			}
		}
		.air-button{
			display: flex;
			justify-content: center;
			.switch{
				margin: 0 60rpx;
			}
			image{
				width: 120rpx;
				display: block;
			}
			.up{
				width: 60rpx;
			}
			.down{
				width: 60rpx;
			}
			.box{
				background-color: #DFE0DF;
				width: 120rpx;
				height: 120rpx;
				margin:20rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}
		}
	}
	
</style>
